import React from 'react'
import logo from './logo.svg'
import type { MouseEvent } from 'react'
import './App.css'

function App() {
  var s = 'w'

  function List() {
    return  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  }
  
  var num: number = 100
  // function List() {
  //   return <ul>1</ul>;
  // }
  // console.log(list)
  const fn = (event: MouseEvent<HTMLButtonElement>,name:string) => {
    // num = num + 1
    console.log(name)
  }

  const list = [
    {name:'张三',age:90,id:1},
    {name:'李四',age:22,id:2},
    {name:'王五',age:33,id:3},
    
  ]

  const flag =  true;

  function Hello() {
    if (flag) {
       return <h3>h3</h3>
    } else {
      return <h2>h2</h2>
    }
  }

  return (
    <div className="App">
      <header className="App-header">
        <ul>
          {
            list.map(e => {
              const {name,id} = e
              if (id != 2) {
                return <li key={id}>{name}</li>
              } 
            })
          }
        </ul>
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <Hello></Hello>
        <List></List>
        {flag && <h1>Hello</h1>}
        <div>
          <button
            onClick={event => {
              fn(event, 'hello')
            }}
          >
            {num}
          </button>
          {/* <label htmlFor="input1">姓名：</label><input id="input1" type="text" /> */}
        </div>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
          style={{
            color: 'red',
          }}
        >
          Learn React
        </a>
      </header>
    </div>
  )
}

export default App
